<script setup lang="ts">
import http from '@/http';
import { ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';

// 存储当前选中的行数据
const selectedRows = ref([]);
let flg=ref(false)
// 表格的引用
const tableRef = ref(null);

// 处理表格选择项变化的方法
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
  flg.value = rows.length > 0;
};
//当前页的页号发生改变
const handleCurrentChange = (val: number) => {
  //console.log(`current page: ${val}`)
  //重新获取当前页的数据
  pageNum.value = val
  page()
}
//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(5)
//总条数
let total = ref(0)
//条件
let providerName = ref('')
let contactName = ref('')
let contactTel = ref('')
let status = ref('')

//表格数据
let proDate = ref([])

const handleSizeChange = (val: number) => {
  pageSize.value = val;
    page();
};
//获取数据
function page() {
    http.get('pro/page', {
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            providerName: providerName.value,
            contactName: contactName.value,
            contactTel: contactTel.value,
            status: status.value
           
        }
    }).then((res) => {
        proDate.value = res.list
        total.value = res.total
    });
}
  onMounted(() => {
    page();
    
  });
  function search() {
    page();
  }
  function reset() {
    providerName.value = ''
    contactName.value = ''
    contactTel.value = ''
    status.value = ''
    page();
  }
  //删除
  function handleDelete(index, row) {
    ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      http.get('pro/delete', { params: { providerId: row.providerId } }).then((res) => {
        if (res>0) {
          //弹出提示信息
      ElMessageBox({
        message: '删除成功',
        type: 'success',
        title: '提示'
      })
          page();
        }
      });
    }).catch(() => {
      //弹出提示信息
      ElMessageBox({
        message: '已取消删除',
        type: 'info',
        title: '提示'
      })
    });
  }
  //批量删除
    function handleDelete1() {
        ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
        let ids = selectedRows.value.map((item) => item.providerId).join(',')
        http.get('pro/deletes', { params: { providerIds: ids } }).then((res) => {
            if (res>0) {
            //弹出提示信息
        ElMessageBox({
            message: '删除成功',
            type: 'success',
            title: '提示'
        })
            page();
            }
        });
        }).catch(() => {
        //弹出提示信息
        ElMessageBox({
            message: '已取消删除',
            type: 'info',
            title: '提示'
        })
        });
    }
   //添加
  let dialogVisible = ref(false);
  let  provider=ref({
    providerId: '0',
    providerName: '',
    contactName: '',
    contactMobile: '',
    contactTel: '',
    bankAccount: '',
    providerAddress: '',
    status: '0'
  })
   //添加按钮
    function addproducter() {
      dialogVisible.value = true;
    }
    //添加确定按钮
    function add() {
      http.post('pro/add', provider.value).then((res) => {
        if (res>0) {
          //弹出提示信息
      ElMessageBox({
        message: '添加成功',
        type: 'success',
        title: '提示'
      })
          dialogVisible.value = false;
          page();
        }
      });
    }
    //添加取消按钮
    function close() {
      dialogVisible.value = false;
      provider.value = {
        providerId: '0',
        providerName: '',
        contactName: '',
        contactMobile: '',
        contactTel: '',
        bankAccount: '',
        providerAddress: '',
        status: '0'
      }
    }
    //关闭弹窗
    function handleDialogClose() {
      dialogVisible.value = false;
      provider.value = {
        providerId: '0',
        providerName: '',
        contactName: '',
        contactMobile: '',
        contactTel: '',
        bankAccount: '',
        providerAddress: '',
        status: '0'
      }
    }
    let dialogVisible1 = ref(false);
    //修改
    function handleUpdate(index, row) {
      dialogVisible1.value = true;
      provider.value = row;
    }
    //修改确定按钮
    function updateprovider() {
      http.post('pro/updateprovider', provider.value).then((res) => {
        if (res>0) {
          //弹出提示信息
      ElMessageBox({
        message: '修改成功',
        type: 'success',
        title: '提示'
      })
          dialogVisible1.value = false;
          page();
        }
      });
    }
  
  </script>

<template>
    <el-container>
      <el-header> 
        <el-row >
        <el-col :span="5">
          <div class="grid-content ep-bg-purple" >
        供应商名称    <el-input v-model="providerName" placeholder="供应商名称" style="width: 120px;"></el-input>
        </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" >
        联系人    <el-input v-model="contactName" placeholder="请输入联系人" style="width: 120px;"></el-input>
        </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content ep-bg-purple" >
        供应商电话   
        <el-input v-model="contactTel" placeholder="请输入供应商电话" style="width: 120px;"></el-input>
        </div>
        </el-col>
            <el-col :span="4">
            <div class="grid-content ep-bg-purple-light" >
           状态
           <el-select v-model="status" placeholder="可用状态" style="width: 120px;">
          <el-option  label="正常"    value="0"  />
          <el-option  label="停用"    value="1"  />
          </el-select> 
                </div>
            </el-col>
            <el-col :span="2">
            <div class="grid-content ep-bg-purple-light" >
              <el-button type="primary" icon="search" @click="search" width="100px">搜索</el-button>
              </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content ep-bg-purple-light" >
              <el-button  icon="Refresh" @click="reset" width="100px">重置</el-button>
             </div>
          </el-col>
        </el-row>

        <el-row>
            <el-col :span="2">
      <div class="grid-content ep-bg-purple" >
        <el-button type="primary" icon="Plus" @click="addproducter">添加</el-button>
        </div>
    </el-col> 
    <el-col :span="2">
      <div class="grid-content ep-bg-purple" >
        <el-button type="danger" icon="Delete" @click="handleDelete1" :disabled="!flg">删除</el-button>
        </div>
    </el-col>
  </el-row>
      </el-header>
  
      <el-main>
        <el-table :data="proDate" style="width: 100%;margin-top: 50px;" row-key="providerId" border @selection-change="handleSelectionChange" ref="tableRef">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="providerId" label="供应商id" align="center"  width="100"></el-table-column>
            <el-table-column prop="providerName" label="供应商名称" align="center" width="200"></el-table-column>
            <el-table-column prop="contactName" label="联系人" align="center" width="120"></el-table-column>
            <el-table-column prop="contactMobile" label="联系人手机" align="center" width="200"></el-table-column>
            <el-table-column prop="contactTel" label="联系人电话" align="center"width="130" ></el-table-column>
            <el-table-column prop="bankAccount" label="银行账号" align="center" width="130"></el-table-column>
            <el-table-column prop="providerAddress" label="地址" align="center"></el-table-column>
            <el-table-column  label="状态" align="center">
                <template #default="{ row }">
                    <el-tag v-if="row.status == 0" type="success">正常</el-tag>
                    <el-tag v-else type="danger">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="150"></el-table-column>
          <el-table-column label="操作" width="180" align="center" >
            <template #default="scope">
                <el-button type="text" size="small" icon="Edit" @click="handleUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button type="text" size="small" icon="Delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
                 <!--分页-->
  <el-row style="margin-top: 20px;">
    <el-col :span="12" :offset="6">
      <div class="demo-pagination-block">
         <el-pagination
        @size-change="handleSizeChange"
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 5, 8, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />
      </div>
    </el-col>
  </el-row>
      </el-main>
    </el-container>
    <el-dialog title="添加供应商" v-model="dialogVisible" width="30%"  @close="handleDialogClose">
    <el-form :model="provider" label-width="100px">
        <el-form-item label="供应商名称" >
            <el-input v-model="provider.providerName" placeholder="请输入供应商名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
            <el-input v-model="provider.contactName" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机">
            <el-input v-model="provider.contactMobile" placeholder="请输入联系人手机"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话">
            <el-input v-model="provider.contactTel" placeholder="请输入联系人电话"></el-input>
        </el-form-item>
        <el-form-item label="银行账号">
            <el-input v-model="provider.bankAccount" placeholder="请输入银行账号"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="provider.providerAddress" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-radio-group v-model="provider.status">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">停用</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="add">
          确定
        </el-button>
        <el-button @click="close()">取消</el-button>
      </div>
    </template>
    </el-dialog>
    <!--修改-->
    <el-dialog title="修改供应商" v-model="dialogVisible1" width="30%" @close="handleDialogClose">
    <el-form :model="provider" label-width="100px">
        <el-form-item label="供应商名称" >
            <el-input v-model="provider.providerName" placeholder="请输入药品名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
            <el-input v-model="provider.contactName" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机">
            <el-input v-model="provider.contactMobile" placeholder="请输入联系人手机"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话">
            <el-input v-model="provider.contactTel" placeholder="请输入联系人电话"></el-input>
        </el-form-item>
        <el-form-item label="银行账号">
            <el-input v-model="provider.bankAccount" placeholder="请输入银行账号"></el-input>
        </el-form-item>
        <el-form-item label="地址">
            <el-input v-model="provider.providerAddress" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-radio-group v-model="provider.status">
                <el-radio label="0">正常</el-radio>
                <el-radio label="1">停用</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
    <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="updateprovider">
            确定
            </el-button>
            <el-button @click="close()">取消</el-button>
        </div>
        </template> 
    </el-dialog>

  </template>
  <style scoped>
  .el-header {
    background-color: #f5f7fa;
    padding: 20px;
  }
  .el-dialog__body {
  padding: 20px;
}
  </style>